<!--
 * @Descripttion:
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-08-24 14:18:18
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-30 11:29:25
-->
<template>
	<div id="app">
		<router-view :key="$route.fullPath" v-if="isRourerAlive" />
	</div>
</template>
<script>
	export default {
		provide() {
			return {
				reload: this.reload
			}
		},
		data() {
			if (this.$route.meta.out && this.$route.meta.out == true) {
				window.location.href = this.$route.fullPath;
			}
			return {
				isRourerAlive: true
			}
		},
		watch: {
			// 方法1
			'$route'(to, from) { //监听路由是否变化
				if (to.query.index == 0) {
					localStorage.setItem("currentNav", '')
				} else {
					localStorage.setItem("currentNav", to.query.index)
				}
			},
		},
		mounted() {
			// if (this._isMobile()) {
			// 	if (this.$router.history.pending.path == '/detailMobile') {
			// 		this.$router.push({
			// 			path: this.$router.history.pending.fullPath
			// 		})
			// 	} else {
			// 		this.$router.push({
			// 			path: "/homeMobile"
			// 		})
			// 	}
			// }
		},
		methods: {
			reload() {
				this.isRourerAlive = false
				this.$nextTick(function() {
					this.isRourerAlive = true
				})
			},
			_isMobile() {
				let flag = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
					)
				return flag;
			}
		}
	}
</script>
<style lang="scss">
	#app {
		height: 100%;
		overflow-y: auto;
		// background: $--color-warning;
	}

	.el-message {
		min-width: 180px !important;
	}

	.el-loading-spinner .el-loading-text {
		color: $--color-primary !important;
	}

	.el-loading-spinner .path {
		stroke: $--color-primary !important;
	}

	.vue-quill-editor img {
		max-width: 100%;
	}

	#myHtmlElement img {
		max-width: 100%;
	}

	.el-table__body-wrapper {
		z-index: 1;
	}
</style>

<style lang="scss" scoped>
	::v-deep {

		// 修改表头的背景颜色横向渐变色
		.el-table {
			width: calc(100% - 40px) !important;
			margin: 20px;
			margin-top:0px;
			box-shadow: 0 12px 12px 0 rgba(0, 0, 0, .1);
			// border:4px solid rgba(0,0,0,0.1);
			thead {
				color: #fff;
				font-weight: 500;

				& th {
					background-color: #304156;
					// background-color: #304156;
					color: #fff;
					border: none;
				}
			}
		}

		.el-dialog__header {
			background-color: #304156;

			// background-color: #304156;
			.el-dialog__title {
				color: #fff;
			}

			.el-icon:hover {
				background: none !important;
			}

			.el-icon {
				color: #fff !important;
			}
		}

		.dialog-footer .el-button--primary {
			background-color: #304156;
			border-color: #304156;
		}

		.el-checkbox__input.is-checked .el-checkbox__inner {
			border-color: #304156;
			background: #304156;
		}

		.el-checkbox__inner:hover {
			border-color: #304156;
		}

		.select-tag {
			background-color: #304156 !important;
			border-color: #304156 !important;
			color: #fff !important;
			font-weight: bolder;

			.el-tag__close {
				color: #fff !important;
			}
		}

		.e-search-form .el-form-item {
			margin-bottom: 0px !important;
		}

		.topNav {
			background: #e9eef2;
			width: 100%;
			overflow: hidden;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			padding: 0 20px;
			margin-bottom: 20px;

			.el-button--text {
				color: #304156;
				display:block !important;
				float: left;
			}
		}

		.bigDiv {
			margin: 20px !important;
			border: 1px solid #eee;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
			border-radius: 5px;
			padding: 0px !important;

			width:calc(100% - 40px);
			el-form {
				overflow: hidden;
			}
		}
		.e-search-form .el-form{
			width:calc(100% - 20px)
		}
		.el-pager .number.active{
			background:#606266 !important;
			color:#fff;
		}
		.el-button--text{
			color:#606266 !important;
			display:block !important;
			float: left;
		}
		
		.el-table__header .is-leaf{
			background:#304156 !important;
		}
	}
</style>